<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function imgChange(fileId,imgId){
            var reader = new FileReader();//定义文件读取流对象
            reader.readAsDataURL(document.getElementById(fileId).files[0]);
            reader.onload = function (ev) {
                //设置图片的src属性
                document.getElementById(imgId).src = ev.target.result;
            }
        }
    </script>
</head>
<body>
    <form action="/user/add" method="post" enctype="multipart/form-data">
      姓名：<input type="text" name="userName"><br>
        <img src="" id="faceImg" width="300" height="300"><br>
      头像：<input type="file" name="face" id="faceFile"
                  onchange="imgChange('faceFile','faceImg')"><br>
      <input type="submit" value="提交">
    </form>
</body>
</html>